<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#nav {
				width: 100%;
				height: 80px;
				background-image: linear-gradient(to bottom, #ccc, white);
			}
			
			#nav img {
				width: 80px;
				float: left;
			}
			
			#nav h1 {
				line-height: 80px;
			}
			#nav span{
				    padding-left: 900px;
			}
			#nav span a{
				color: black;
				text-decoration: none;
			}
			#quanping{
				width: 100%;
				height: 580px;
				background: rgba(0,0,0,0.5);
				position: relative;
			}
			#denglu{
				position: absolute;
			    width: 350px;
			    height: 200px;
			    border-radius: 25px;
			    background: #CCCCCC;
			    left: 473px;
			    top: 150px;
			}
			#denglu p{
				height: 30px;
				font-size: 18px;
				margin-top: 20px;
				padding-left: 50px;
			} 
			#denglu p input{
				height: 25px;
			}
			#denglu button{
				width: 100px;
				height: 40px;
				margin-top: 34px;
				margin-left: 120px ;
			}
			#zhuce{
				position: absolute;
			    width: 350px;
			    height: 200px;
			    border-radius: 25px;
			    background: #CCCCCC;
			    left: 473px;
			    top: 150px;
			    display: none;
			}
			#zhuce p{
				height: 30px;
				font-size: 18px;
				margin-top: 20px;
				padding-left: 50px;
			} 
			#zhuce p input{
				height: 25px;
			}
			#zhuce button{
				width: 100px;
				height: 40px;
				margin-top: 34px;
				margin-left: 120px ;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<img src="img/01.jpg" />
			<h1>星辰图书管理系统<span><a href="###" id="zc">注册</a></span></h1>
		</div>
		<div id="quanping">
			<div id="denglu">
				<p>账号：<input type="text" name="username" id="user" value="" /></p>
				<p>密码：<input type="password" name="password" id="pwd" value="" /></p>
				<button id="btn">登录</button>
			</div>
			<div id="zhuce">
				<p>账号：<input type="text" name="username" id="username" value="" /></p>
				<p>密码：<input type="password" name="password" id="password" value="" /></p>
				<button id="btn0">提交</button>
			</div>
		
		</div>
		
	</body>
	<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("#zc").on("click",function(){
			$("#denglu").css("display","none");
			$("#zhuce").css("display","block");
		})
			$("#btn0").on("click",function(){
				$.ajax({
					type:"POST",
					url:"http://localhost:10010/users",
					data:{"username":username.value,"password":password.value},
					success:function(asd){
						console.log(asd);
					},
					error:function(aaa){
						console.lor(aaa);
					}
				});
			$("#denglu").css("display","block");
			$("#zhuce").css("display","none");
			})
		
		$("#btn").on("click",function(){
				$.ajax({
					type:"post",
					url:"http://localhost:10010/users/login",
					data:{"username":user.value,"password":pwd.value},
					success:function(data){
						console.log(data)
						location.href = "图书管理系统.html";
					},
					error:function(aaa){
							console.log(aaa);
							alert("账号密码不存在")
					},
				});		
		})
			

	</script>
</html>
